<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js制作简单计算器</title>
    <style>
        #jsq{
            width: 310px;
            height: 480px;
            padding: 5px 0px;
            background-color: mediumorchid;
            border-radius: 5%;
            text-align: center;
            box-shadow: 0px 5px 20px;/*给计算器一些阴影，看起来有立体感*/
        }
        #txt{
            width: 220px;
            height: 38px;
            border: none;
            border-radius: 10px 0px 0px 10px;/*给input文本框的左上角和左下角设置圆角*/
            box-shadow: 0px 5px 10px;
            outline: none;
            text-align: right;
            font-size: 24px;
        }
        #dele{
            display: inline-block;
            height: 40px;
            background-color: #fff;
            border: none;
            padding-top: 9px;
            outline: none;
            border-radius: 0px 10px 10px 0px;/*给ibutton的右上角和右下角设置圆角*/
            color: red;
        }
        .btn{
            background-color: #fff;
            outline: none;
            width: 60px;
            height: 60px;
            border: 1px solid yellowgreen;
            border-radius: 15px;
            margin-top: 10px;
            box-shadow: 0px 5px 15px;/*给按钮一些阴影，看起来有立体感*/
            font-size: 18px;
            background-color: slategray;
        }
        .first{
            background-color: red;
        }
        .ling{
            width: 125px;
        }
    </style>
</head>
<body>
<div id="jsq">
    <h2>javascript简单计算器</h2>
    <!-- 计算器显示框 id为txt -->
    <input type="text" id="txt"><button id="dele"><strong><<</strong></button>
    <div>
        <input type="button" value="AC" class="btn first">
        <input type="button" value="ON" class="btn">
        <input type="button" value="OFF" class="btn">
        <input type="button" value="+" class="btn nuber"><br>
        <input type="button" value="7" class="btn nuber">
        <input type="button" value="8" class="btn nuber">
        <input type="button" value="9" class="btn nuber">
        <input type="button" value="*" class="btn nuber"><br>
        <input type="button" value="4" class="btn nuber">
        <input type="button" value="5" class="btn nuber">
        <input type="button" value="6" class="btn nuber">
        <input type="button" value="-" class="btn nuber"><br>
        <input type="button" value="1" class="btn nuber">
        <input type="button" value="2" class="btn nuber">
        <input type="button" value="3" class="btn nuber">
        <input type="button" value="/" class="btn nuber"><br>
        <input type="button" value="0" class="btn nuber ling">
        <input type="button" value="." class="btn nuber">
        <!-- “=”的按钮，设置id为result -->
        <input type="button" value="=" class="btn" id="result">
    </div>
</div>
<script>
    var nub = document.getElementsByClassName('nuber');
    var ac = document.getElementsByClassName('first')[0];
    var rs = document.getElementById('result');
    var txt = document.getElementById('txt');
    var de = document.getElementById('dele');
    //用for循环给所有class为nuber的标签绑定onclick事件，
    //执行dis方法且把自己的value当作实参传入dis方法中
    for(let i =0;i<nub.length;i++){
        nub[i].onclick = function(){
            dis(this.value);
        }
    }
    //dis方法就是改变txt的value，使用形参，让nub把自己的value传进来
    function dis(va){
        txt.value += va;
    }
    //lete方法是接收删除后的数据
    function lete(bb){
        txt.value = bb;
    }
    //“AC”的点击事件，当点击AC时，把txt里的value为空
    ac.onclick = function(){
        txt.value = "";
    }

    //给“=”按钮绑定添加onclick事件，
    rs.addEventListener('click',function(){
        var result = txt.value;
        txt.value = "";
        txt.value = eval（result); //eval（)方法可以执行JavaScript代码或表达式
    },false)

    //删除键添加onclick事件，方法里取出txt的value值，把value值转换成字符串
    //再使用slice把字符串最后一位去掉，剩下的再返给txt。
    de.addEventListener('click',function(){
        var vl = txt.value;
        var aa = String(vl);
        var ff = aa.slice(0,aa.length-1);
        lete(ff);
    },false)

</script>
</body>
</html>